<template>
  <div class="group-report" v-if="!getIsPhone">
    <relation-display></relation-display>
    <el-table
      :data="groupInfo"
      style="width: 100%"
      >
      <el-table-column
        prop="accountName"
        label="团队"
        >
      </el-table-column>
      <el-table-column
        prop="groupExpences"
        label="消费"
        >
      </el-table-column>
      <el-table-column
        prop="totlaBonus"
        label="中奖"
        >
      </el-table-column>
      <el-table-column
        class=""
        prop="lotteryRefund"
        label="彩票返点"
        >
      </el-table-column>
      <el-table-column
        prop="BIrefund"
        label="BI返水"
        >
      </el-table-column>
      <el-table-column
        class="groupBalance"
        prop="groupBalance"
        label="盈亏总额"
      >
      <template v-slot:default="scope">
        <span v-if="scope.row.groupBalance > 0" style="color: red">{{scope.row.groupBalance}}</span>
        <span v-else style="color: green">{{scope.row.groupBalance}}</span>
      </template>
      </el-table-column>
    </el-table>
    <div class="group-detail">
      <span class="title">下级盈亏明细</span>
      <span class="content">已过滤0盈利账户</span>
    </div>
    <el-table
      :data="getUserInfo.members"
      style="width: 100%"
      >
      <el-table-column
        prop="accountName"
        label="团队"
        >
        <template v-slot:default="scope">
          <div>
            <span>{{scope.row.accountName}}</span>
              <span class="group-size member-count "  
                v-if="scope.row.members.length">
                {{scope.row.members.length}}人
              </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="groupExpences"
        label="消费"
        >
      </el-table-column>
      <el-table-column
        prop="totlaBonus"
        label="中奖"
        
        >
      </el-table-column>
      <el-table-column
        class=""
        prop="lotteryRefund"
        label="彩票返点"
        >
      </el-table-column>
      <el-table-column
        prop="BIrefund"
        label="BI返水"
        >
      </el-table-column>
      <el-table-column
        class="groupBalance"
        prop="groupBalance"
        label="盈亏总额"
      >
      <template v-slot:default="scope">
        <span v-if="scope.row.groupBalance > 0" style="color: red">{{scope.row.groupBalance}}</span>
        <span v-else style="color: green">{{scope.row.groupBalance}}</span>
      </template>
      </el-table-column>
    </el-table>
    <load-more></load-more>
  </div>
  <div class="group-report" v-else>
    <div class="billboard-wrapper">
      <bill-board>
        <div class="billboard-content">
          <div class="item border-right">
            <div class="title">团队</div>
            <div class="quantity statistics">
            <span>{{groupInfo[0].accountName}}</span>
            <span class="extra"></span>
            </div>
          </div>
          <div class="item border-right">
            <div class="title">{{type}}</div>
            <div class="amount statistics">
            <span>-{{groupInfo[0][fieldKey]}}</span><span class="extra">.00</span>
            </div>
          </div>
          <div class="item">
            <div class="title">盈亏</div>
            <div class="bonus statistics">
              <span>+{{groupInfo[0].totlaBonus}}</span><span class="extra">.00</span>
            </div>
          </div>
        </div>
      </bill-board>
    </div>
    <div class="">
      <div class="group-detail">
        <span class="title">下级盈亏明细</span>
        <span class="content">已过滤0盈利账户</span>
      </div>
    </div>
    <div class="table-wrapper">
      <el-table
        @row-click="checkDetail"
        :data="members"
        style="width: 100%"
        :header-cell-style="cellStyle"
        :cell-style="cellStyle"
        >
        <el-table-column
          :cell-style="cellStyle"
          prop="accountName"
          label="用户名"
          >
          <template v-slot:default="scope">
            <div>
              <span>{{scope.row.accountName}}</span>
                <span class="group-size member-count "  
                  v-if="scope.row.members.length">
                  {{scope.row.members.length}}人
                </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :cell-style="cellStyle"
          :label="type"
          props="groupExpences"
          width="80"
          >
          <template v-slot:default="scope">
            <div>
              <span>{{scope.row[fieldKey]}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :cell-style="cellStyle"
          class="groupBalance"
          prop="groupBalance"
          label="总额"
          >
          <template v-slot:default="scope">
            <span v-if="scope.row.groupBalance > 0" style="color: red">{{scope.row.groupBalance}}</span>
            <span v-else style="color: green">{{scope.row.groupBalance}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="detail-info" v-show="showDetail">
      <group-detail v-show="showDetail" @click="hideDetail" :item="item"></group-detail>
    </div>
  </div>
</template>

<script>
import { formatDateNoYear } from '@/assets/js/util'
import TailBox from '@/components/tail-box/tail-box'
import LoadMore from '@/components/base/load-more/load-more'
import RelationDisplay from '@/components/relation-display/relation-display'
import BillBoard from '@/components/base/bill-board/bill-board'
import GroupDetail from './group-detail'

import { mapGetters } from 'vuex';
export default {
  components: {
    TailBox,
    LoadMore,
    RelationDisplay,
    BillBoard,
    GroupDetail
  },
  props: {
    type: {
      type: String,
      default: '消费'
    },
    fieldKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDetail: false,
      // 表格每一行对应的数据
      item: {}
    }
  },
  created() {
    console.log(this.getUserInfo)
  },
  methods:{
    formatDate(row, column, cellValue) {
      return formatDateNoYear(cellValue)
    },
    formatLotteryState(state) {
      switch(state) {
        case 0: 
          return '未开奖'
          break;
        case 1: 
          return '已中奖'
          break;
        case 2: 
          return '未中奖'
          break;
        case 3: 
          return '已撤单'
          break;
      }
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex == 0) {
        return 'text-align: left; padding-left: 10px'
      }
      else if (columnIndex == 1) {
        return 'text-align: center'
      } else {
        return 'text-align: right; padding-right: 10px'
      }
    },
    // 点击表格查看详情
    checkDetail(row) {
      this.item = row 
      this.showDetail = true
    },
    hideDetail() {
      this.showDetail = false
    }
  },
  computed: {
    ...mapGetters('lottery', ['getUserInfo', 'getIsPhone']),
    groupInfo() {
      return [this.getUserInfo]
    },
    members() {
      return [this.getUserInfo, ...this.getUserInfo.members]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px) 
  .group-report 
    .member-relations 
      height 40px 
      background $color-text-button
      display flex 
      align-items center
      box-sizing border-box 
      padding-left 20px
      .relations >>> .tail-box 
        border 1px solid $color-divide-line 
        line-height 24px 
        width auto 
        padding 0 10px
        box-sizing border-box
        margin-right 10px
        .context 
          color $color-theme-dark 
          font-weight 500
        em 
          border-color transparent transparent transparent $color-divide-line
      .relations 
        display flex 
        .user 
          height 24px 
          line-height 24px
          padding 0 10px
      .title 
        font-weight 700
        margin-right 15px
    .group-detail 
      height 40px 
      display flex 
      align-items center 
      justify-content space-between 
      box-sizing border-box 
      padding 0 20px
      .group-size 
        color $color-theme-red 
        font-size 12px
      .title 
        font-size 15px 
        font-weight 700
  .group-report >>> .el-table 
    tr 
      height 40px 
      line-height 40px
      padding-top 0
    th 
      padding 0
      background #e7e0dd
      color $color-theme-dark
      .cell
        padding-left 20px
        font-size 15px
        font-weight 700
    td 
      padding 0
      height 40px
      line-height 40px
      .cell 
        padding-left 20px
        height 40px
        line-height 40px
        button 
          color $color-sub-grey
          padding 0
@media screen and (max-width 750px) 
  .group-report  >>> .content
    margin 0 !important
  .group-report >>> .el-table 
    tr 
      height 40px 
      line-height 40px
      padding-top 0
    th 
      padding 0
      background #e7e0dd
      color $color-theme-dark
      .cell
        padding 0
        font-size 15px
        font-weight 700
    td 
      height 40px
      line-height 40px
      padding 0
      .cell 
        height 40px
        line-height 40px
        padding 0 
  .group-report  
    .billboard-wrapper 
      box-sizing border-box 
      padding 0 10px
    .billboard-content 
      width 100% 
      display flex
      height 70px
      background #fff
      .item 
        width 33.33% 
        box-sizing border-box 
        display flex 
        flex-direction column 
        justify-content center
        .title 
          margin-bottom 10px
          color $color-sub-grey
        .statistics
          display inline-block
          span 
            font-size 15px
          .extra 
            display inline-block
            font-size 10px
          &.amount 
            color $color-primary-green
          &.bonus
            color $color-theme-red
    .group-detail 
      height 40px 
      display flex 
      align-items center 
      justify-content space-between 
      box-sizing border-box 
      padding 0 10px
      .group-size 
        color red
      .title 
        font-weight 700
    .table-wrapper 
      box-sizing border-box 
      padding 0 10px 
  .detail-info 
    position fixed 
    top 0
    left 0
    right 0
    bottom 0
    z-index 100000
    background:linear-gradient(180deg, #e5e5e5, #fefbfb)
</style>